<template>
	<div>
		<div class="flex justify-center items-center w-[100vw] h-[100vh]" v-if="canvasSourceData.length === 0">
			<a-spin />
		</div>
		<GridLayout
			v-model:layout="canvasSourceData"
			:col-num="12"
			:row-height="30"
			:is-draggable="false"
			:is-resizable="false"
			vertical-compact
			use-css-transforms
			class="wrapper min-h-[100%] min-w-[100%]"
		>
			<GridItem
				v-for="item in canvasSourceData"
				:key="item.i"
				:x="item.x"
				:y="item.y"
				:w="item.w"
				:h="item.h"
				:i="item.i"
				:id="'box' + item.i"
				:style="{ 'border-color': `${item.i === useDesignStore.selectedComponent.i ? '#45a5ffcc' : 'transparent'}` }"
				class="item relative"
			>
				<component :is="item.name" :id="item.i" :config="item" :key="item.i" @upDataConfig="upDataConfig" />
			</GridItem>
		</GridLayout>
	</div>
</template>

<script setup>
	import { designStore } from '@/views/plugin/dashboard/store'
	import { ref, computed, onMounted } from 'vue'
	import { useRoute } from 'vue-router'
	import { getDashboardDetail } from '@/views/plugin/dashboard/api/dashboardApi'

	const useDesignStore = designStore()
	const route = useRoute()
	const canvasSourceData = ref([])
	// 获取仪表盘详情
	const getDashboardInfo = async () => {
		const { id } = route.query
		if (id) {
			const res = await getDashboardDetail({ id })
			try {
				const sourceData = JSON.parse(res.dsConfig)
				if (Array.isArray(sourceData.canvasSourceData)) {
					canvasSourceData.value = sourceData.canvasSourceData
				} else {
					canvasSourceData.value = []
				}
			} catch (error) {
				console.log('error', error)
				canvasSourceData.value = []
			}
		}
	}
	const reload = setInterval(() => {
		canvasSourceData.value = []
		getDashboardInfo()
	}, 5000)

	onUnmounted(() => {
		clearInterval(reload)
	})

	// 页面加载时获取仪表盘详情
	onMounted(() => {
		useDesignStore.getDataSource()
		getDashboardInfo()
	})
</script>
<style scoped lang="less">
	:deep(.ant-card-body) {
		padding: 0 24px 0 24px;
	}

	:deep(.ant-drawer-body) {
		color: #000000; // 修改字体颜色为黑色
	}
</style>
